<template>
	<view class="wrap">
		<view class="u-tabs-box">
			<u-tabs-swiper 
				activeColor="#de4f38" 
				inactive-color="#171717"
				ref="tabs" 
				:list="list" 
				:height="100"
				:current="current" 
				:bar-width="60"
				:bar-style="barStyle"
				@change="handleChangeTab" 
				:is-scroll="false" 
				swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper 
			class="swiper-box" 
			:current="swiperCurrent" 
			@transition="transition" 
			@animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view 
					scroll-y 
					style="height: 100%;width: 100%;" 
					@scrolltolower="reachBottom">
					<Empty text="您还没有此状态任务!快来报名接任务~" v-if="isEmpty" />
					<view class="page-box" v-else>
						<TaskList 
							:list="dataList" 
							@handleReason="handleReason"
							@handleCancel="handleCancel"
							@handleFinish="handleFinish" />
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view 
					scroll-y 
					style="height: 100%;width: 100%;" 
					@scrolltolower="reachBottom">
					<Empty text="您还没有此状态任务!快来报名接任务~" v-if="isEmpty" />
					<view class="page-box" v-else>
						<TaskList
							:list="dataList" 
							@handleReason="handleReason"
							@handleCancel="handleCancel"
							@handleFinish="handleFinish" />
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view 
					scroll-y 
					style="height: 100%;width: 100%;" 
					@scrolltolower="reachBottom">
					<Empty text="您还没有此状态任务!快来报名接任务~" v-if="isEmpty" />
					<view class="page-box" v-else>
						<TaskList
							:list="dataList" 
							@handleReason="handleReason"
							@handleCancel="handleCancel"
							@handleFinish="handleFinish" />
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 查看原因弹窗 -->
		<u-mask :show="maskShow" :mask-click-able="false">
			<MaskConten title="拒绝理由" :content="maskContent" @click="handleCloseMask" />
		</u-mask>
		<!-- 取消任务弹窗 -->
		<u-modal 
			v-model="modelShow" 
			width="548"
			:show-title="false"
			show-cancel-button
			border-radius="20"
			cancel-color="#999999"
			confirm-color="#171717"
			:content="modelContent"></u-modal>
		<!-- tabbar -->
		<!-- <tabbarList /> -->
	</view>
</template>

<script>
// import tabbarList from '@/components/tabbar-list/index.vue'
import Empty from '@/components/empty/index.vue'
import TaskList from '@/components/task-list/index.vue'
import MaskConten from '@/components/mask-content/index.vue'
export default {
	components: {
		// tabbarList
		Empty,
		TaskList,
		MaskConten
	},
	data() {
		return {
			isEmpty: false,
			maskShow: false,
			modelShow: false,
			current: 0,
			swiperCurrent: 0,
			dx: 0,
			orderList: [[], [], []],
			loadStatus: ['loadmore','loadmore','loadmore'],
			maskContent: '粉丝条件不满足，我们需要有强大的粉丝浏览的达人，期待下次合作',
			modelContent: '确认取消该任务吗?',
			barStyle: {
				bottom: '8rpx',
				borderRadius: '6rpx'
			},
			list: [
				{
					id: 1,
					name: '已报名'
				},
				{
					id: 2,
					name: '进行中'
				},
				{
					id: 3,
					name: '已结束'
				}
			],
			dataList: [
				{
					id: 1,
					title: 'YSL圣罗兰精彩底妆礼盒小金条21',
					brand_name: '轻十一设计',
					fans_ask: '5000+',
					receive_time: '2021-03-06',
					status: 2,
					url: 'http://img3m8.ddimg.cn/8/27/1267839548-1_b_3.jpg'
				},
				{
					id: 2,
					title: 'YSL圣罗兰精彩底妆礼盒小金条21',
					brand_name: '轻十一设计',
					fans_ask: '5000+',
					receive_time: '2021-03-06',
					status: 1,
					url: 'http://img3m8.ddimg.cn/8/27/1267839548-1_b_3.jpg'
				},
				{
					id: 3,
					title: 'YSL圣罗兰精彩底妆礼盒小金条21',
					brand_name: '轻十一设计',
					fans_ask: '5000+',
					receive_time: '2021-03-06',
					status: 4,
					url: 'http://img3m8.ddimg.cn/8/27/1267839548-1_b_3.jpg'
				},
				{
					id: 4,
					title: 'YSL圣罗兰精彩底妆礼盒小金条21',
					brand_name: '轻十一设计',
					fans_ask: '5000+',
					receive_time: '2021-03-06',
					status: 3,
					url: 'http://img3m8.ddimg.cn/8/27/1267839548-1_b_3.jpg'
				},
				{
					id: 5,
					title: 'YSL圣罗兰精彩底妆礼盒小金条21',
					brand_name: '轻十一设计',
					fans_ask: '5000+',
					receive_time: '2021-03-06',
					status: 5,
					url: 'http://img3m8.ddimg.cn/8/27/1267839548-1_b_3.jpg'
				},
				
			]
		};
	},
	onLoad() {
		this.orderList[this.current] = this.dataList
		if(!this.orderList[this.current].length) {
			this.isEmpty = true
		}
		console.log(this.orderList[this.current].length)
	},
	methods: {
		handleChangeTab(index) {
			this.swiperCurrent = index
		},
		transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx)
		},
		animationfinish({ detail: { current } }) {
			this.$refs.tabs.setFinishCurrent(current)
			this.swiperCurrent = current
			this.current = current
		},
		reachBottom() {
			
		},
		// 查看原因
		handleReason(item) {
			this.maskShow = true
			switch(this.current) {
				case 0:
					console.log('第一页')
					break
				case 1:
					console.log('第二页')
					break
				case 2:
					console.log('第三页')
					break
			}
		},
		// 取消任务
		handleCancel(item) {
			this.modelShow = true
			switch(this.current) {
				case 0:
					console.log('第一页')
					break
				case 1:
					console.log('第二页')
					break
				case 2:
					console.log('第三页')
					break
			}
		},
		// 完成任务
		handleFinish(item) {
			uni.navigateTo({
				url: '/pages/task/finishTask/finishTask',
			})		
		},
		// 关闭遮罩层
		handleCloseMask() {
			this.maskShow = false
		}
	},
	options: { styleIsolation: 'shared' }
}
</script>

<style lang="scss" scoped>
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
	.swiper-box {
		flex: 1;
		.swiper-item {
			height: 100%;
		}
	}
	.page-box {
		padding-top: 20rpx;
	}
	/deep/ .u-model {
		.u-model__title {
			padding-top: 0;
		}
		.u-model__content {
			padding: 32rpx 0;
			.u-model__content__message {
				color: $u-text-color;
			}
		}
		.u-model__footer {
			&.u-border-top {
				&::after {
					// border-color: $u-border-light-grey-color;
					border-top-color: $u-border-light-grey-color;
				}
			}
			.u-model__footer__button {
				&:first-of-type {
					position: relative;
					&::after {
						content: ' ';
						position: absolute;
						left: 0;
						top: 0;
						pointer-events: none;
						box-sizing: border-box;
						transform-origin: 0 0;
						width: 200%;
						height: 200%;
						transform: scale(0.5, 0.5);
						border: 0 solid $u-border-light-grey-color;
						border-right-width: 2rpx;
						z-index: 2;
					}
				}
			}
		}
	}
}
</style>
